<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding-left: 200px;
    }

    input, button {
      outline: none;
    }

    ul, li {
      list-style: none;
    }

    .addSale, .calc {
      width: 200px;
      height: 33px;
      background-color: skyblue;
      color: #fff;
      cursor: pointer;
      border: none;
      margin: 30px;
    }

    input {
      width: 300px;
      height: 30px;
      padding-left: 20px;
      font-size: 22px;
      display: block;
      margin: 20px;
    }

    ul {
      display: flex;
      margin: 20px;
    }

    ul > li {
      width: 120px;
      height: 120px;
      background-color: orange;
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 30px;
      cursor: pointer;
    }

    ul > li.active {
      background-color: skyblue;
    }

    p {
      font-size: 100px;
      color: red;
      margin: 20px;
    }

  </style>
</head>
<body>

  <button class="addSale">添加折扣类型</button>

  <!-- 总价格 -->
   <br />
  <b>总价:</b><input type="text">


  <!-- 折扣类型 -->
  <ul>
    <li class="active">1111</li>
    <li>1111</li>
    <li>1111</li>
  </ul>

  <button class="calc">计算总价</button>

  <!-- 最终价格 -->
  <br />
  <b>最终价格:</b><p>0.00</p>


  折扣名称(显示在按钮上的文本): <input type="text" class="type">
  计算方式(总价以 x 表示): <input type="text" class="method">
<script>

    // 获取元素
    const calcBox = document.querySelector('.calc'); //计算总价
    const ul = document.querySelector('ul'); //折扣类型 
    const totalInput = document.querySelector('input'); //输入总价
    const p = document.querySelector('p'); //最终价格
    const addSale = document.querySelector('.addSale'); //添加折扣类型
    const newInp = document.querySelector('.type'); //折扣名称
    const methodInp = document.querySelector('.method'); //计算方式
    let type = ''; //存放折扣类型
    // 编写策略模式  

    const calprice = (function(){
                const callist = {
                '80%': function (price) {
                    return (price * 0.8).toFixed(2)
                },
                '70%': function (price) {
                    return (price * 0.7).toFixed(2)
                },
                '200-20':function (price) {
                    return price-parseInt(price/200)*20;
                } ,
                // '300-30':function(总价){
                //     return 总价-parseInt(总价/300)*30;
                // }
                
            }

            function calculate(total, type) {
                if(!callist[type]){
                    return total
                }
                return callist[type](total)
            }

            // 把calculate当做一个对象来用 
            calculate.add = function (type,fn) {
                callist[type] = fn
            }

            calculate.remove = function () {
                delete callist[type]
            }

            calculate.get = function () {
                return callist
            }
            return calculate
        })();

        // 渲染  
        function bindHtml() {
            const list = calprice.get();
            let str = '';
            for (let key in list) {
                str += `<li data-type="${key}">${key}</li>`
            }

            ul.innerHTML = str
        }
        bindHtml()


        // 选择折扣类型
        ul.addEventListener('click',e=>{
            if(e.target.nodeName !== 'LI'){
                return 
            }
            // 移出所有li的高亮
            for(let i=0;i<ul.children.length;i++){
                ul.children[i].classList.remove('active')
            }
            // 给当前点击的li添加高亮
            e.target.classList.add('active')

            type = e.target.dataset.type


            
        })


        // 结算  
        calcBox.addEventListener('click',()=>{
            // 拿到总价
            const totalprice = totalInput.value - 0;
            // 拿到折扣类型
            if(type){
                const result_price = calprice(totalprice, type);
                p.innerText = result_price;
            }

           
        })


        // 添加折扣类型
        addSale.addEventListener('click',function(){
            // 拿到新的折扣名称
            const name = newInp.value;
            // 拿到计算公式 
            
            const run = 'parseInt('+methodInp.value+').toFixed(2)';

            // 调用add 加入到策略模式中
            calprice.add(name,x=>eval(run));

            // calprice.add('300-30',x=> parseInt(x-(x/300)*30).toFixed(2))

            // x-(x/300)*30
            bindHtml() // 重新渲染页面 

            newInp.value = ''; //清空输入框 为下一次准备
            methodInp.value = '';

        })

</script>   
  </body>
  </html>